import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Image
} from 'react-native'
import NavigatorUtil from './js/utils/NavigatorUtil'
import NavigationBar from './js/common/NavigationBar'
class Girl extends Component {
  constructor(props) {
    super(props)
    this.params = this.props.navigation.state.params
  }
  _renderButton(image) {
    return (
      <TouchableOpacity
        onPress={() => {
          NavigatorUtil.goBack(this.props.navigation)
        }}
      >
        <Image style={{ width: 22, height: 22, margin: 5 }} source={image} />
      </TouchableOpacity>
    )
  }
  render() {
    const { success, navigation, word } = this.params
    return (
      <View style={styles.container}>
        <NavigationBar
          title={'girl'}
          statusBar={{
            backgroundColor: '#64B5F6'
          }}
          leftButton={this._renderButton(require('./res/images/ic_arrow_back_white_36pt.png'))}
          rightButton={this._renderButton(require('./res/images/ic_star.png'))}
        />
        <Text style={styles.text}>I am girl</Text>
        <Text
          style={styles.text}
          onPress={() => {
            success('一盒巧克力')
            NavigatorUtil.goToBoy({
              navigation,
            })
          }}
        >
          送男孩一盒巧克力
                </Text>
        <Text style={styles.text}>接收到：{word}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'pink',
  },
  text: {
    fontSize: 20,
  }
})

export default Girl
